<script setup>
import { ref, onMounted, computed } from 'vue';
import * as echarts from 'echarts';

const timeRange = ref('week');
const chartRef = ref(null);
const avgSystolic = ref(118);
const avgDiastolic = ref(76);
const measureCount = ref(28);

const pressureLevel = computed(() => {
  if (avgSystolic.value < 120 && avgDiastolic.value < 80) return '正常';
  if (avgSystolic.value < 140 && avgDiastolic.value < 90) return '偏高';
  return '高血压';
});

const initChart = () => {
  const chart = echarts.init(chartRef.value);

  const option = {
    tooltip: {
      trigger: 'axis',
      formatter: '日期: {b0}<br/>收缩压: {c0} mmHg<br/>舒张压: {c1} mmHg'
    },
    legend: {
      data: ['收缩压', '舒张压']
    },
    xAxis: {
      type: 'category',
      data: ['6/1', '6/8', '6/15', '6/22', '6/29', '7/6', '7/13']
    },
    yAxis: {
      type: 'value',
      name: '血压(mmHg)',
      min: 60,
      max: 160
    },
    series: [
      {
        name: '收缩压',
        data: [120, 118, 122, 125, 119, 121, 118],
        type: 'line',
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
          width: 3,
          color: '#E6A23C'
        }
      },
      {
        name: '舒张压',
        data: [78, 76, 80, 82, 77, 79, 76],
        type: 'line',
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
          width: 3,
          color: '#409EFF'
        }
      }
    ]
  };

  chart.setOption(option);
  window.addEventListener('resize', chart.resize);
};

const fetchData = () => {
  console.log('获取血压数据，时间范围:', timeRange.value);
};

onMounted(() => {
  initChart();
  fetchData();
});
</script>

<template>
  <div class="blood-pressure-container">
    <div class="header">
      <h3>血压监测</h3>
      <el-select v-model="timeRange" size="small" @change="fetchData">
        <el-option label="最近7天" value="week" />
        <el-option label="最近30天" value="month" />
        <el-option label="最近3月" value="quarter" />
      </el-select>
    </div>

    <div ref="chartRef" class="chart" />

    <div class="stats">
      <el-statistic title="平均血压" :value="`${avgSystolic}/${avgDiastolic}`" />
      <el-statistic title="血压等级" :value="pressureLevel" />
      <el-statistic title="测量次数" :value="measureCount" />
    </div>
  </div>
</template>

<style scoped>
.blood-pressure-container {
  padding: 15px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart {
  width: 100%;
  height: 350px;
}

.stats {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  padding: 15px;
  background: #f5f7fa;
  border-radius: 8px;
}
</style>